import { Card, Col, Row, Spin } from 'antd';
import React from 'react';

export const MenuList: React.FC<{
  dishes: Array<{
    id: number;
    name: string;
    price: number;
    image?: string;
  }>;
  loading: boolean;
  onAddToOrder: (dish: any) => void;
}> = ({ dishes, loading, onAddToOrder }) => {
  return (
    <div style={{ height: '600px', width: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
      {loading ? (
        <Spin tip="加载中..." style={{ display: 'block', textAlign: 'center', marginTop: 50 }} />
      ) : dishes.length > 0 ? (
        <Row gutter={[16, 32]}>
          {dishes.map((dish) => (
            <Col span={6} key={dish.id}>
              <Card
                title={dish.name}
                cover={<img alt={dish.name} src={dish.image || 'path/to/default-image.jpg'} />}
                extra={<button onClick={() => onAddToOrder(dish)}>+</button>}
              >
                <p>¥{dish.price}</p>
              </Card>
            </Col>
          ))}
        </Row>
      ) : (
        <p style={{ textAlign: 'center', marginTop: 50 }}>暂无菜品数据</p>
      )}
    </div>
  );
};
